@use "../../common";

@function localVar($key, $default) {
  @return common.globalVar(slide_ + $key, $default);
}

.yarl__slide {
  &_captions_container {
    position: absolute;
    left: localVar(captions_container_left, 0);
    right: localVar(captions_container_right, 0);
    padding: localVar(captions_container_padding, 16px);
    background: localVar(captions_container_background, rgba(0, 0, 0, 0.5));

    // workaround occasional image flickering in mobile Safari
    // noinspection CssUnknownProperty
    -webkit-transform: translateZ(0);
  }

  &_title {
    color: localVar(title_color, common.$color-white);
    font-size: localVar(title_font_size, 125%);
    font-weight: localVar(title_font_weight, bolder);
    max-width: calc(100% - var(--yarl__toolbar_width, 0px));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &_container {
      top: localVar(title_container_top, 0);
    }
  }

  &_description {
    overflow: hidden;
    hyphens: auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: localVar(description_max_lines, 3);
    text-align: localVar(description_text_align, start);
    color: localVar(description_color, common.$color-white);

    &_container {
      bottom: localVar(description_container_bottom, 0);
    }
  }
}
